<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Website</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="header-logo">Header Logo</div>
            <nav>
                <ul>
                    <li><a href="https://www.freecodecamp.org/learn/responsive-web-design/">header link one</a></li>
                    <li><a href="https://www.freecodecamp.org/learn/responsive-web-design/">header link twe</a></li>
                    <li><a href="https://www.freecodecamp.org/learn/responsive-web-design/">header link three</a></li>
                </ul>
            </nav>
    </header>
    <!-- 主要内容 -->
    <main>
        <!-- 英雄区域 -->
         <section class="hero">
            <div class="hero-text">
                <h1>This website is awesome</h1>
                <p>his website has some subtext that goes here under the main title. It's a smaller font and the color is
                    lower contrast</p>
                <button class="sign-up-button">Sign up</button>
            </div>
            <div class="hero-image-placeholder">
                <p>this is  a placeholder for a image</p>
            </div>
         </section>

        <!-- 随机信息区域 -->
         <section>
            <h2>Some Random information</h2>
            <div class="information-card">
                <div class="card">
                    <div class="card-placehoder"></div>
                    <p>hello world!!!1</p>
                </div>
                <div class="card">
                    <div class="card-placehoder"></div>
                    <p>hello world!!!2</p>
                </div>
                <div class="card">
                    <div class="card-placehoder"></div>
                    <p>hello world!!!3</p>
                </div>
                <div class="card">
                    <div class="card-placehoder"></div>
                    <p>hello world!!!</p>
                </div>
            </div>
         </section>
         <!-- 引用区域 -->
          <section>
            <p>This is an inspiring quote, or a testimonial from a customer. Maybe it's just filling up space, or maybe
                people will actually read it. Who knows? All I know is that it looks nice.</p>
            <cite>-Thor, God of Thunder</cite>
          </section>
          <!-- 行动召唤区域 -->
           <section class="call-to-action">
                <div class="action-container">
                    <div class="action-text">
                        <h3>Call to action It`s time</h3>
                        <p>Sign up for our product by clicking that button right over there!</p>
                    </div>                        
                    <button class="call-to-action-button">Sign Up</button>
                </div>
           </section>
    </main>

    <footer>
        <p>buy the best choose us!!!</p>
    </footer>

</body>
</html>